<template>
    <div class="page">
        <app-header>
            <a slot="left" href="javascript:;" class="go-back" @click="back"></a>
            <span slot="title">今日推荐</span>
        </app-header>
        <div class="today-nav">
            <swiper :options="{slidesPerView : 4}" ref="myswiper">
                <swiper-slide v-for="(item,index) in nav" :key="index">
                    <span v-text="item" :class="{'current':activeIndex===index}" @click="get(index,item)"></span>
                </swiper-slide>
            </swiper>
        </div>
        <div class="search-list">
            <ul class="flexbox flex-wrap">
                <each-list v-for="(item,index) in list" :item="item" :key="index"></each-list>
            </ul>
            <app-loading v-if="show" :end="end"></app-loading>
        </div>
        <div v-if="showBackTop" @click="toTop" class="to-top"></div>
    </div>
</template>
<script>
import mixin from "@/mixin";
import appHeader from "@/components/common/HeadBar";
import appLoading from "@/components/common/Loading";
import eachList from "@/components/common/EachList";
export default {
  data() {
    return {
      activeIndex: 0,
      nav: [], // 导航栏目
      list: [], // 数据列表
      page: 1, // 当前页
      show: false, // 加载状态
      flag: true, // 防止重复加载
      end: false // 分页是否全部加载
    };
  },
  mixins: [mixin],
  components: {
    appHeader,
    appLoading,
    eachList
  },
  computed: {
    swiper() {
      return this.$refs.myswiper.swiper;
    }
  },
  methods: {
    load_today_data() {
      this.api.get_today_index().then(response => {
        //赋值
        var data = response.data;
        this.nav = data.nav;
        this.list = data.product_list;
      });
    },
    get(index, key) {
      this.activeIndex = index;
      this.swiperTo(this.swiper, index, 2);
    },
    scroll() {
      // 加载分页数据(当前网页高度 <= (网页被卷进去的距离 + 文档显示区的宽度) + 500(提前加载))
      var scrollTop =
        document.documentElement.scrollTop ||
        window.pageYOffset ||
        document.body.scrollTop;
      if (document.body.offsetHeight <= scrollTop + window.innerHeight + 500) {
        // 模拟加载全部分页
        if (this.page > 4) {
          this.show = true;

          // 全部加载完成
          this.end = true;

          // 终止
          return false;
        }

        // 防止重复加载
        if (this.flag) {
          // 数据返回之前 滚动禁止重复请求
          this.flag = false;

          // 显示加载动画
          this.show = true;

          // api
          this.api
            .get_product_list({
              params: {
                type: "today", // 类型
                page: (this.page += 1), // 当前请求页
                pagesize: 6 // 每页返回数
              }
            })
            .then(response => {
              // 恢复滚动请求
              this.flag = true;

              // 关闭加载动画
              this.show = false;

              // 更新数组
              var items = response.data.product_list;
              items.forEach((item, index) => {
                this.list.push(item);
              });
            });
        }
      }
    }
  },
  created() {
    // 初始化数据
    this.load_today_data();
  },
  mounted() {
    // 滚动操作
    window.addEventListener("scroll", this.scroll);
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.scroll);
  }
};
</script>
<style src="@/assets/scss/result.scss" lang="scss"></style>
